<template>
  <view class="app app-bg">
    <u-cell-group>
      <u-cell-item
        :title="$t('setting.third-party-account-association')"
        :label="$t('setting.third-party-account-association-tips')"
        :label-style="labelStyle"
        @click="pageTo('/pages/user/setting/account-associated')"
      ></u-cell-item>
      <u-cell-item
        v-if="isBindMobileCom"
        :value="bindMobileCom"
        :label-style="labelStyle"
        :title="$t('setting.modify-mobile')"
        :label="$t('setting.modify-mobile-tips')"
        @click="pageTo('/pages/user/setting/update-mobile?pageIndex=0')"
      ></u-cell-item>
      <u-cell-item
        v-else
        :label-style="labelStyle"
        :value="$t('setting.click-bind')"
        :title="$t('setting.bind-mobile')"
        :label="$t('setting.bind-mobile-tips')"
        @click="pageTo('/pages/user/setting/update-mobile?pageIndex=1')"
      ></u-cell-item>
      <u-cell-item
        v-if="isBindMobileCom"
        :label-style="labelStyle"
        :title="$t('setting.modify-login-password')"
        :label="$t('setting.modify-login-password-tips')"
        @click="pageTo('/pages/user/setting/update-password')"
      ></u-cell-item>
      <u-cell-item
        label="设置支付密码用于余额支付"
        title="支付密码"
        :label-style="labelStyle"
        @click="pageTo('/pages/user/setting/update-payword')"
      ></u-cell-item>
      <u-cell-item
        style="border-top: 20rpx solid #f5f5f5"
        title="注销账号"
        @click="show = true"
      ></u-cell-item>
    </u-cell-group>
    <u-modal
      show-cancel-button
      v-model="show"
      :content="content"
      @confirm="confirm"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      labelStyle: { color: "#C0C0C0", fontSize: "24rpx" },
      content: "注销账号后将无法再登录，确认注销么？",

      show: false,
    };
  },
  methods: {
    pageTo(path) {
      vk.navigateTo(path);
    },
    confirm() {
      vk.callFunction({
        url: "client/user.closeOff",
        title: "注销中...",
      }).then(() => {
        vk.toast("注销成功！", "none", 1000, () => {
          uni.$emit("clearInfo");
          vk.navigateBack();
        });
      });
    },
  },
  computed: {
    isBindMobileCom() {
      let userInfo = vk.getVuex("$user.userInfo");
      return userInfo && userInfo.mobile ? true : false;
    },
    bindMobileCom() {
      let mobile = vk.getVuex("$user.userInfo.mobile");
      return vk.pubfn.hidden(mobile, 3, 4);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .u-cell {
  padding: 20rpx 24rpx !important;
}

/deep/ .u-cell__label {
  margin-top: 0 !important;
}
</style>
